<template>
	<view class="register-container">
		<view class="register_card">
			<view class="register_card-header">
				<uni-icons type="person" size="25" color="#18bc37"></uni-icons>
				<text class="register_card-header-title">注册</text>
			</view>
			<view class="register_card-form">
				<form @submit="onSubmit">
					<view class="register_card-content" style="display:flex;align-items:center">
						<text class="content">姓名</text>
						<input type="text" placeholder="请输入姓名" name="name">
					</view>
					<view class="register_card-content" style="display:flex;align-items:center">
						<text class="content">昵称</text>
						<input type="text" placeholder="请输入昵称" name="nickName">
					</view>
					<view class="register_card-content" style="display:flex;align-items:center">
						<text class="content">性别</text>
						<picker :range="options" name="gender" :value="selectValue" @change="pickerChange">
							<view>{{options[selectValue]}}</view>
						</picker>
					</view>
					<view class="register_card-content" style="display:flex;align-items:center">
						<text class="content">手机号</text>
						<input type="text" placeholder="请输入手机号" name="userphone" />
					</view>
					<view class="register_card-content" style="display:flex;align-items:center">
						<text class="content">邮箱</text>
						<input type="text" placeholder="请输入邮箱" name="email" />
					</view>
					<view class="register_card-content" style="display:flex;align-items:center">
						<button class="register-card-btn1" form-type="reset">重置信息</button>
						<button class="register-card-btn2" form-type="submit">提交信息</button>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'; //引入moment依赖
	import md5 from 'js-md5'; //引入md5依赖
	import {
		memberRegister
	} from '../../api/index.js'; //引入会员注册接口
	let timeStamp = moment(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss");
	const miniProgramAppid = 'wx95df8d135409ab43';
	export default {
		data() {
			return {
				options: ["男", "女"],
				selectValue: 1
			}
		},
		methods: {
			onSubmit(e) {
				console.log(e)
				this.obj = e.detail.value,
					this.obj.gender = this.options[this.selectValue],
					this.register()
			},
			pickerChange(e) {
				this.selectValue = e.detail.value
			},
			//会员注册
			register() {
				const openid = uni.getStorageSync('openid');
				memberRegister({
						appId: miniProgramAppid,
						appType: "weixin1",
						nickName: this.obj.nickName,
						name: this.obj.name,
						openId: openid,
						phone: this.obj.userphone,
						platCode: "WEIXIN",
						shop: "W006",
						email: this.obj.email,
						created: timeStamp,
						gender: this.obj.gender
					})
					.then(res => {
						console.log(res)
						uni.navigateBack({
							delta: 1
						})
					})
					.catch(res => {
						uni.showToast({
							title: '注册失败',
							icon: 'none',
							duration: 2000
						})
					})
			}
		}
	}
</script>

<style lang="scss">
	.register-container {
		overflow: hidden;
		font-family: HYQihei 40S;

		.register_card {
			margin: 15px;
			padding: 0 10px 10px 10px;
			//box-shadow: 0px 0px 3px 1px rgb(150 141 141 / 8%);
			border: 1px solid #ccc;

			.register_card-header {
				display: flex;
				border-bottom: 1px #ccc solid;
				flex-direction: row;
				align-items: center;
				padding: 10px;
				overflow: hidden;

				.register_card-header-title {
					font-size: 15px;
					color: #3a3a3a;
				}
			}

			.register_card-form {
				display: flex;
				padding: 5px 0px 5px 0px;
				flex-direction: column;
				justify-content: center;
				flex: 1;
				overflow: hidden;
				border: 1rpx solid #ccc;

				.register_card-content {
					padding: 10px 0px 10px 0px;

					.content {
						box-sizing: 85rpx;
						padding: 0px 24px 0px 10px;
					}
				}

				.register-card-btn1 {
					background-color: #fcfcfc;
					font-size: 13pt;
					color: #1AAD19;
					width: 250rpx;
					height: 100rpx;
				}

				.register-card-btn2 {
					background-color: #09bb07;
					font-size: 13pt;
					color: #fff;
					width: 250rpx;
					height: 100rpx;
				}
			}
		}
	}
</style>